<template>
  <div class="modal-form-body">
    <div class="tool-btn">
      <Button
        size="small"
        style="margin-right: 10px;"
        type="primary"
        icon="ios-document"
        @click="save"
        >{{$t('q-FETLOZVSMbWnrNq0vj6')}}</Button
      >
      <Button size="small" type="error" icon="ios-remove" @click="cancel"
        >{{$t('JueO39I1jRqJkSh6Wtld-')}}</Button
      >
    </div>
    <div class="modal-form-container">
      <vuescroll :ops="ops">
        <el-tree
          ref="tree"
          show-checkbox
          :data="treeData"
          :props="defaultProps"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
        >
        </el-tree>
      </vuescroll>
    </div>
  </div>
</template>

<script>
import vuescroll from 'vuescroll'
import { getUserRoleList, getRoleInfoByName } from '@/api/data2'
import { flatManageMap, flatAgentMap, flatStationMap } from '@public/menu'
import { filterMenuByUserLevel } from '@/libs/util'
const isFalse = p => {
  return _.isNil(p) || p === '' || p == 0
}
const isLeaf = (id, data) => {
  return !data.find(d => d.pid == id)
}
export default {
  name: 'menu-role-component',
  components: {
    vuescroll
  },
  props: {
    selectRoles: Array,
    show: Boolean
  },
  data () {
    return {
      ops: {
        scrollPanel: {
          maxHeight: 500
        }
      },
      data: [],
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'titlename'
      }
    }
  },
  computed: {
    isAdmin () {
      return this.$store.getters.isAdmin
    },
    isAgent () {
      return this.$store.getters.isAgent
    },
    isStation () {
      return this.$store.getters.isStation
    }
  },
  mounted () {
    this.queryData()
  },
  watch: {
    show (val) {
      if (val) {
        this.queryData()
      }
    }
  },
  methods: {
    async queryData () {
      const { code, data, desc } = await getRoleInfoByName({
        name: this.$store.state.user.rolename
      })
      if (code == 200) {
        this.data = data.menulist || []
      } else {
        this.$Message.error(desc)
        this.data = []
      }
      this.getTreeData()
    },
    getTreeData () {
      // const list = this.filterData(this.data)
      const list = _.cloneDeep(this.data)
      const data = list.map(d => {
        return _.assign({}, d, { children: [] })
      })
      _.forEach(data, d => {
        if (!isFalse(d.pid)) {
          const target = data.find(l => l.id === d.pid)
          target && target.children.push(d)
        }
      })
      const root = _.sortBy(data.filter(d => isFalse(d.pid)), ['isort'])
      root.forEach(r => {
        if (r.children && r.children.length) {
          r.children = _.sortBy(r.children, ['isort'])
        }
      })
      this.treeData = root
      this.$nextTick(() => {
        this.setSelectNodes()
      })
    },
    filterData (data) {
      let target
      if (this.isAdmin) {
        target = flatManageMap
      } else if (this.isAgent) {
        target = flatAgentMap
      } else {
        target = flatStationMap
      }
      return filterMenuByUserLevel(target, data)
    },
    setSelectNodes () {
      const roles = []
      this.selectRoles.forEach(role => {
        if (isLeaf(role, this.data)) {
          roles.push(role)
        }
      })
      this.$refs.tree.setCheckedKeys(roles)
    },
    getCheckedNodes () {
      const nodes = this.$refs.tree.getCheckedNodes(false, true)
      console.log('==== getCheckedNodes', nodes)
      return nodes.map(n => n.id)
    },
    save () {
      this.$emit('save', this.getCheckedNodes())
    },
    cancel () {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="stylus" scoped>
.tool-btn
  padding 10px
</style>
